<head>
	<meta charset="utf-8" />
	<title>如何用HTML5的FileReader生成Data Url</title>

	<script type="text/javascript">
		function imageDataUrl(source) {
			var file = source.files[0];
			if (window.FileReader) {
				var fr = new FileReader();
				fr.onloadend = function(e) {
					document.getElementById("txtBase64").value = e.target.result;
					document.getElementById("imgView").src = e.target.result;
				};
				fr.readAsDataURL(file);
			}
		}
	</script>
</head>

<body>
	<p>用HTML5的FileReader生成Data Url</p>
	<input type="file" onchange="imageDataUrl(this)" style="border:1px solid #808080; width:432px;" />
	<br />
	<textarea id="txtBase64" cols="50" rows="20"></textarea>
	<img id="imgView" src="" style="width:400px;height: 400px;" />
</body>

</html>
